<template>
  <div class="login-container">
    <div class="login-content">
      <div class="login-title">欢迎登录</div>
      <van-tabs v-model:active="active" color="#1777FF">
        <van-tab title="手机号登录">
          <div class="login-form">
            <div class="login-input mb-24">
              <div class="login-icon">+86</div>
              <div class="line"></div>
              <van-field v-model="phone" name="phone" type="tel" placeholder="请输入11位手机号"/>
            </div>
            <div class="flex  mb-24">
              <div class="login-input mr-12">
                <div class="login-icon"><van-icon name="phone-o" size="18"/></div>
                <div class="line"></div>
                <van-field v-model="phone" name="phone" type="digit" clearable placeholder="请输入验证码"/>
              </div>
              <div class="login-input login-code">获取验证码</div>
            </div>
            <div class="flex mb-24">
              <van-checkbox  shape="square" checked-color="#1777FF" icon-size="14px" v-model="checked">我已阅读并同意<i class="check-i">《用户协议》</i>和<i class="check-i">《个人信息保护政策》</i></van-checkbox>
            </div>
            <div class="flex mb-12">
              <van-button block color="#1777FF" native-type="submit" @click="handleSubmit" loading-text="登录中..." :loading="loading">登录</van-button>
            </div>
            <div class="text-DADADA align-center">未注册手机号将自动注册</div>
          </div>
        </van-tab>
        <van-tab title="账号密码登录">
          <div class="login-form">
            <div class="login-input mb-24">
              <div class="login-text">账号</div>
              <div class="line"></div>
              <van-field v-model="phone" name="phone" placeholder="请输入您的OA账号"/>
            </div>
            <div class="login-input mb-24">
              <div class="login-text">密码</div>
              <div class="line"></div>
              <van-field v-model="phone" name="phone" type="password" placeholder="请输入您的密码"/>
            </div>
            <div class="flex mb-24">
              <van-checkbox  shape="square" checked-color="#1777FF" icon-size="14px" v-model="checked">我已阅读并同意<i class="check-i">《用户协议》</i>和<i class="check-i">《个人信息保护政策》</i></van-checkbox>
            </div>
            <div class="flex mb-12">
              <van-button block color="#1777FF" native-type="submit" @click="handleSubmit" loading-text="登录中..." :loading="loading">登录</van-button>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import sHeader from '@/components/SimpleHeader.vue'
import { appLogin, queryVerificationCode } from '@/service/login';

const active = ref(0);

const phone = ref("")

import $Cry from '@/utils/cryptoJs';

import { usePersonalStore } from '@/stores/user';

import { useRouter, useRoute } from 'vue-router';

import { storeToRefs } from 'pinia'

const personalStore = usePersonalStore();

const { mobile } = storeToRefs(personalStore);

const checked = ref(false);

const loading = ref(false);

const router = useRouter();

const handleSubmit = () => {
  router.push("/home")
}
import { showSuccessToast, showFailToast } from 'vant'
const state = reactive({
  password: '',
  loginType: 3,
  source: 'H5/个人微信',
  type: 'password',
  verify: ''
})

const isSeePassFlag = ref(false);

const togglePass = () => {
  isSeePassFlag.value = !isSeePassFlag.value;
}
const flag = ref(false);
const codeText = ref('获取验证码');

const secondValue = ref(60);

const countTime = () => {

  secondValue.value = 60;
  let interval = setInterval(() => {
    if (secondValue.value > 0) {
      secondValue.value--;
      codeText.value = `${secondValue.value}s后重新获取`;
    } else {
      flag.value = false;
      clearInterval(interval);
      interval = null;
      codeText.value = '获取验证码';
    }
  }, 1000);
}
const toggle = (v) => {
  state.type = v
  state.verify = ''
}

const getCode = async () => {
  flag.value = true;
  try {
    const res = await queryVerificationCode({ tel: mobile.value, messageType: 2 });
    if (res.data) {
      countTime();
    }
  } catch (error) {
    flag.value = false;
  }

}

// 提交登录或注册表单
const onSubmit = async (values) => {

  if (state.type == 'password') {
    if (!checked.value) {
      showFailToast('请先阅读用户协议与隐私政策！');
      return;
    }
    loading.value = true;
    try {
      const res = await appLogin({
        password: $Cry.getAES(values.password),
        userAccount: values.userAccount,
        source: 'H5/个人微信',
        loginType: 3
      })
      loading.value = false;
      personalStore.setUserId(res.data.userGuid);
    } catch (error) {
      loading.value = false;
    }

    // 需要刷新页面，否则 axios.js 文件里的 token 不会被重置

  } else {
    try {
      const res = await appLogin({
        verificationCode: values.verify,
        userAccount: values.userAccount,
        source: 'H5/个人微信',
        loginType: 3
      })
      loading.value = false;
      personalStore.setUserId(res.data.userGuid);
    } catch (error) {
      loading.value = false;
    }

  }
  window.location.href = '/'
}
</script>

<style lang="less" scoped>
.check-i{
  font-style:normal;
  color:#000000;
}
.login-form{
  padding: 36px 0;
  
  .login-input{
    padding-right:8px;
    height: 46px;
    width: 100%;
    border: 1px solid #B4B4B4;
    border-radius: 4px;
    display:flex;
    align-items:center;
    
    .login-icon{
      font-size:16px;
      color: #B4B4B4;
      min-width: 42px;
      padding: 8px;
      text-align:center;
    }
    .login-text{
      font-size:12px;
      color: #B4B4B4;
      min-width: 42px;
      padding: 8px;
      text-align:center;
    }
    .line{
      width:1px;
      background: #B4B4B4;
      height:24px;
    }
  }
  .login-code{
    width: 200px;
    font-size: 14px;
    justify-content:center;
    color:#333333;
  }
}
.login-container {
  width: 100%;
  height: 100%;
  background-image: url("@/assets/login-bj.jpg");
  background-size: cover;
  position: relative;

  .login-content {
    height: 70%;
    width: 100%;
    border-radius: 20px 20px 0 0;
    background: #FFFFFF;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    padding: 36px 24px;

    .login-title {
      color: #333333;
      font-size: 20px;
      font-weight: bold;
    }
  }
}
</style>
